import React, {Component} from 'react';
import {Link} from 'react-router';
import './index.less';
import {connect}from 'react-redux';
import {Table,Icon,Popconfirm,Input,Radio,Button,Spin,Modal} from 'antd';
import {get} from '../../../utils/network';
import {GetData,DeleteItem,AddData,EditData}from '../../actions/work';

const RadioGroup = Radio.Group;
class Work extends Component {
    constructor(props){
        super(props);
        this.state={
            ...this.props.work,
            columns:[{title:'ID',dataIndex:'UserId'},
            {title:'姓名',dataIndex:'UserName'},
            {title:'性别',dataIndex:'UserGender',render:(text,record)=>{
                if(record.UserGender == 0){
                    return <span>男</span>
                }else if(record.UserGender == 1){
                    return <span>女</span>
                }else{
                    return <span>无</span>
                }
            }},
            {title:'手机号',dataIndex:'UserTelPhone'},
            {title:'操作',dataIndex:'',render: (text, record) => {
                console.log('20200');
                console.log(record);
                return (
                  this.props.work.data.length > 1 ?
                  (
                    <div>
                    <Popconfirm title="Sure to delete?" onConfirm={() => this.onDelete(record.Id)}>
                    <Button type='primary' style={{color:'#fff'}}><a>删除</a></Button>
                    </Popconfirm>
                     <Button type='primary' style={{marginLeft:10}} onClick={()=>this.update(record)}><a>编辑</a></Button>
                     </div>
                  ) : (<span></span>)
                );
              },}],
              sex:0,
              btnState:0,
              editid:'',
        }
    }
    componentWillMount(){
        
    }
    update(record){
        let id=record.Id,
            userId=record.UserId,
            username=record.UserName,
            usergender=record.UserGender,
            usertel=record.UserTelPhone;
        let form=this.state.form;
            form.id=userId;
            form.username=username;
            form.sex=usergender;
            form.telephone=usertel;
           this.setState({
                form:form,
                btnState:1,
                editid:id,
           })
    }
   onSelectchange=(selectedRowKeys,selectedRows)=>{
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({selectedRowKeys:selectedRowKeys});
   }
   handleTableChange=(pagination)=>{
       this.props.dispatch(GetData(pagination));
       pagination.current =pagination.current;
       this.setState({
           pagination:pagination,
       });
   }
   componentDidMount(){
       console.log('get');
       const pagination={...this.state.pagination};
       pagination.current=1;
       pagination.pageSize=10;
       this.props.dispatch(GetData(pagination));
   }
   onDelete = (key) => {
       this.props.dispatch(DeleteItem(key));
  }
  onChanges=(e)=>{
      this.setState({
          value:e.target.value,
      })
  }
  sinadd(key,data){
      this.setState({
          form:Object.assign({},this.state.form,{[key]:data.target.value})
      })
  }
  adds(){
      this.props.dispatch(AddData(this.state.form));
      this.setState({
          btnState:0,
      })
  }
  edit(id){
      let Id=this.state.editid;
    this.props.dispatch(editData(this.state.form,Id));
    let form=this.state.form;
        form.id='';
        form.username='';
        form.sex='';
        form.telephone='';
    this.setState({
        form:form,
        btnState:0,
    })
  }
    render() {
       
        const {selectedRowKeys}=this.state;
        const rowSelection={
            selections:false,
            onChange:(selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect:(record,selected,selectedRows)=>{
                //console.log(`selectedRows: ${selectedRows}`);
            },
            
            onSelectAll:(record,selected,selectedRows)=>{
                //console.log(`selectedRows: ${selectedRows}`);
            }
        }
        const hasSelected = selectedRowKeys.length > 0;
        const {data,pagination} = this.props.work;
       
        return (
            <div>
            <span className='margin-right'>Work</span>
            <span><Link to='/'>返回首页</Link></span>
            <span style={{ marginLeft: 8 }}>
                {hasSelected ? `Selected ${selectedRowKeys.length} items` : 'null'}
            </span>
            <div id='inputs'>
                ID:<Input placeholder='请输入内容' size="large" className='input' onChange={this.sinadd.bind(this,'id')} value={this.state.form.id}/>
               用户名:<Input placeholder='请输入内容' size="large" className='input' onChange={this.sinadd.bind(this,'username')} value={this.state.form.username}/>
               手机号:<Input placeholder='请输入内容' size="large" className='input' onChange={this.sinadd.bind(this,'telephone')} value={this.state.form.telephone}/>
               性别: <RadioGroup onChange={this.sinadd.bind(this,'sex')} value={this.state.form.sex}>
                        <Radio value={0}>男</Radio>
                        <Radio value={1}>女</Radio>
                    </RadioGroup>  
                    {this.state.btnState == 0 ?(<Button type='primary' onClick={this.adds.bind(this)}>添加</Button>):
                    (<Button type='primary' onClick={this.edit.bind(this)}>编辑</Button>
                    )}
            </div>
            <div id='content' style={{ marginBottom: 16 }}>
               <Table 
               rowSelection={rowSelection} 
               columns={this.state.columns} 
               dataSource={data} 
               rowKey={record=>record.Id}
               pagination={pagination}
               onChange={this.handleTableChange}
               />
             </div>
             {this.props.work.loading?(<Spin className='position' size='large' tip='loading...'/>):(<span/>)}
            </div>
            
        )
    }
}
const mapStateToProps=(state)=>{
    return {
        work:state.work,
    }
}
export default connect(mapStateToProps)(Work);